<template>
  <div class="shop">
    <van-tabs v-model="active">
      <van-tab v-for="(item,index) in title" :title="`${item}(${index})`" :key="index">
        <div class="wrapper" slot="title">
          {{item}}
          <span class="ticket"></span>
        </div>
        <!-- 内容 {{ index }} -->
        <div v-if="index===0">
          <genral-goods></genral-goods>
        </div>
        <div v-if="index===1">
          <happy-goods></happy-goods>
        </div>
        <div v-if="index===2">
          <ticket-goods></ticket-goods>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from 'vue'
import { PullRefresh, Icon, Tab, Tabs } from 'vant'
import genralGoods from './genralGoods'
import happyGoods from './happyGoods'
import ticketGoods from './ticketGoods'
Vue.use(PullRefresh).use(Icon).use(Tab).use(Tabs)
export default {
  data() {
    return {
      title: ['普通商品', '幸福币商品', '斑马卷商品'],
      active: 0
    }
  },
  methods: {
  },
  components: {
    genralGoods,
    happyGoods,
    ticketGoods
  }
}
</script>

<style lang="scss" scoped>
@import '../../common/sass/mixin.scss';
.shop {
  .wrapper {
    // color: #b2b2b2;
    .ticket {
      position: absolute;
      top: 25%;
      width: 8px;
      height: 8px;
      background-color: red;
      border-radius: 50%;
      @media screen and (min-width: 320px) {
        right: 8%;
      }
      @media screen and (min-width: 360px) {
        right: 14%;
      }
      @media screen and (min-width: 375px) {
        right: 15%;
      }
      @media screen and (min-width: 414px) {
        right: 18%;
      }
    }
  }
}

.iconfont {
  font-size: 0.5rem;
  color: hotpink; // background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
  background-image: linear-gradient(to bottom, hotpink, rgba(51, 51, 51, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
<style lang="scss">
.shop {
  .van-tabs__nav--line .van-tabs__line {
    background-color: #72c2a7;
  }
  .van-tab--active {
    color: #72c2a7;
  }
}
</style>
